<!--
功能：选择地区
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-21 16:41:00
-->
<template>
  <a-popover v-model:open="visible" trigger="click" placement="bottomLeft">
    <a-input readonly :value="inputValue" :style="{ width: width }" placeholder="点击选择地区">
      <template #suffix>
        <i class="iconfont jichu07"></i>
      </template>
    </a-input>
    <template #content>
      <div class="area-card">
        <div class="area-level">
          <div>
            <span @click="tabIndex = 0" :style="{ color: tabIndex == 0 ? themeColor : '' }">{{
              areaLabel[0] || '省份'
            }}</span>
            <a-divider type="vertical" />
            <span @click="tabIndex = 1" :style="{ color: tabIndex == 1 ? themeColor : '' }">{{
              areaLabel[1] || '城市'
            }}</span>
            <a-divider type="vertical" />
            <span @click="tabIndex = 2" :style="{ color: tabIndex == 2 ? themeColor : '' }">{{
              areaLabel[2] || '区县'
            }}</span>
          </div>
          <a-button type="primary" size="small" style="height: 26px" @click="handleConfirmData"
            >确认</a-button
          >
        </div>
        <!-- 省份数据 -->
        <div class="area-content" v-if="tabIndex == 0">
          <div
            class="area-content-item"
            v-for="item in provinceList"
            :key="item.id"
            :style="areaValue[0] == item.code ? activeStyles : null"
            @click="handleSelectProvince(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 城市数据 -->
        <div class="area-content" v-if="tabIndex == 1">
          <div
            class="area-content-item"
            v-for="item in cityList"
            :key="item.id"
            :style="areaValue[1] == item.code ? activeStyles : null"
            @click="handleSelectCity(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 区县数据 -->
        <div class="area-content" v-if="tabIndex == 2">
          <div
            class="area-content-item"
            v-for="item in districtList"
            :key="item.id"
            :style="areaValue[2] == item.code ? activeStyles : null"
            @click="handleSelectDistrict(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </template>
  </a-popover>
</template>

<script setup>
import areaData from './area.json'
import { ref, computed } from 'vue'
import useSettingsStore from '@/store/modules/settings'
//仓库实例化
const settingsStore = useSettingsStore()
const props = defineProps({
  value: {
    type: Array,
    default: []
  },
  width: {
    type: String,
    default: '352px'
  }
})
// 侧边栏主题
const themeColor = computed(() => {
  return settingsStore.themeColor
})
// 图标容器样式
const activeStyles = computed(() => {
  return {
    backgroundColor: `${themeColor.value}11`,
    color: themeColor.value,
    borderColor: themeColor.value
  }
})
// tabIndex
const tabIndex = ref(0)
// 显示
const visible = ref(false)
// 选择的城市编码数据
const areaValue = ref(props.value)
// 省份数据
const provinceList = computed(() => {
  return areaData
})
// 城市数据
const cityList = computed(() => {
  const provinceItem = provinceList.value.find((item) => item.code == areaValue.value[0])
  if (provinceItem) {
    return provinceItem.children
  } else {
    return []
  }
})
// 区县数据
const districtList = computed(() => {
  const cityItem = cityList.value.find((item) => item.code == areaValue.value[1])
  if (cityItem) {
    return cityItem.children
  } else {
    return []
  }
})
// 根据城市编码数组生成城市名数组
const getAreaLabel = (event) => {
  if (!event || !Array.isArray(event)) {
    event = []
  }
  // 根据传入的数据生成城市名称
  const provinceCode = event[0]
  const cityCode = event[1]
  const districtCode = event[2]
  const areaNameArray = []
  areaData.forEach((element) => {
    if (provinceCode == element.code) {
      areaNameArray[0] = element.name
      element.children.forEach((item) => {
        if (cityCode == item.code) {
          areaNameArray[1] = item.name
          item.children.forEach((seed) => {
            if (districtCode == seed.code) {
              areaNameArray[2] = seed.name
            }
          })
        }
      })
    }
  })
  return areaNameArray
}
// 输入框数据
const inputValue = computed(() => {
  return getAreaLabel(props.value).join('/')
})
// 选择的城市名称数据
const areaLabel = computed(() => {
  return getAreaLabel(areaValue.value)
})
// 选择省份
const handleSelectProvince = (event) => {
  if (event.code == areaValue.value[0]) return
  areaValue.value = [event.code, null, null]
  tabIndex.value = 1
}
// 选择城市
const handleSelectCity = (event) => {
  if (event.code == areaValue.value[1]) return
  areaValue.value[1] = event.code
  areaValue.value[2] = null
  tabIndex.value = 2
}
// 选择区县
const handleSelectDistrict = (event) => {
  if (event.code == areaValue.value[2]) return
  areaValue.value[2] = event.code
}
// 更新派生
const emits = defineEmits(['onConfirm'])
// 选择图标
const handleConfirmData = () => {
  emits('onConfirm', areaValue.value, areaLabel.value)
  visible.value = false
}
</script>
<style lang="scss" scoped>
.area-card {
  height: auto;
  width: 500px;
  .area-level {
    cursor: pointer;
    color: #17233d;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    border-bottom: 1px solid #dcdee2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }
  .area-content {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    padding: 0px 2px 10px 10px;
    &-item {
      border: 1px solid #dcdee2;
      color: #515a6e;
      font-size: 14px;
      padding: 2px 10px;
      border-radius: 4px;
      margin-top: 8px;
      margin-right: 8px;
      cursor: pointer;
      transition: background 0.1s ease-in-out;
      &:hover {
        background-color: #f5f5f5;
      }
      &-active:hover {
        background-color: inherit;
      }
    }
  }
}
// 是手机设备
@media screen and (max-width: 680px) {
  .area-card {
    width: 365px !important;
  }
}
.area-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.area-content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: #bebdbd;
}
.area-content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}
</style>
